import React, { Component } from 'react'
import { withRouter } from 'react-router'
import { Link } from 'react-router-dom'
import queryString from 'query-string'
import InfiniteScroll from 'react-infinite-scroller'
import ask from '../../serve/api';
import styles from './style.module.scss'

class Decision extends Component {

  constructor(){
    super();
    this.state = {
      initPage : 1, // 初始页码
      hasMore : false,
      list : [],
    }
  }

  componentDidMount() {
    // 第一次请求页面列表
    this.fetchList({page : this.state.initPage, pageSize : 5});
  }

  loadMore = (page)=>{
    this.fetchList({page});
  }

  async fetchList (params){
    const {initPage} = this.state;
    const newParams = Object.assign({}, {
      page : initPage,
      pageSize : 4,
    }, params);
    const {code, result} = await ask.fetchListDecision(newParams);
    try {
      if(code !== '000000'){
        this.setState({hasMore : false});
        throw new Error('加载更多数据出错');
      }
      this.setState((preveState)=>{
        const hasMore = Array.isArray(result) && !!result.length;
        const list = preveState.list.concat(result);
        return {
          list,
          hasMore,
        }
      });
    } catch (error) {
      console.log(error);
    }
  }
  
  render() {
    const {
      initPage,
      hasMore,
      list,
      detailPageShow,
      detailPageData,
    } = this.state;
    const topItem = list[0]? list[0] : {};
    const leftItems = list.slice(1);

    return (
      <div className={styles.decision}>
        <div className={styles.banner} style={{backgroundImage : 'url(http://i0.sinaimg.cn/travel/2015/0415/U9385P704DT20150415165004.jpg)'}}></div>

        {/* 内容区 */}
        <div className={styles.content}>

          {/* 置顶文章 */}
          <div className={styles.top}>
            <span className={styles.pic}><img src={topItem.img_url} alt=""/></span>
            <div className={styles.con}>
              <h3><Link to={`/mainPage/pageDetail/decision/${topItem.id}`}>{topItem.title} {topItem.origin}</Link></h3>
              {/* <h3><a onClick={()=>{ this.linkPageDetail(topItem); }}>{topItem.title} {topItem.origin}</a></h3> */}
              <div className={styles.detail}>
                {/* <div className={styles.contxt} dangerouslySetInnerHTML={{__html : topItem.content}}></div> */}
                <div className={styles.contxt}>{topItem.description}</div>
                <div className={styles.btn}><Link to={`/mainPage/pageDetail/decision/${topItem.id}`}>[详情]</Link></div>
              </div>
            </div>
          </div>

          <h2 className={styles.listname}>往期问卷调查</h2>
          <InfiniteScroll
              pageStart={initPage}
              loadMore={this.loadMore}
              hasMore={hasMore}
              // loader={<div className="loader" key={0}>Loading ...</div>}
          >
            <div className={styles.list}>
              <ul>
                { leftItems.map((item, index)=> (
                  <li key={index} className={styles.itemList}>
                    <span className={styles.pic}><img src={item.img_url} alt=""/></span>
                    <div className={styles.con}>
                      <h3><Link to={`/mainPage/pageDetail/decision/${item.id}`}>{item.title}</Link></h3>
                      <div className={styles.detail}>
                        {/* <div className={styles.contxt} dangerouslySetInnerHTML={{__html : item.content}}></div> */}
                        <div className={styles.contxt}>{item.description}</div>
                        <div className={styles.btn}><Link to={`/mainPage/pageDetail/decision/${item.id}`}>[详情]</Link></div>
                      </div>
                    </div>
                  </li>
                ) ) }
              </ul>
              { !hasMore && <p className={styles.loadmore}>没有更多了</p> }
              { hasMore && <p className={styles.loadmore}>加载更多...</p> }
            </div>
          </InfiniteScroll>
        </div>
        
      </div>
    )
  }
}

export default withRouter(Decision);
